<!--
 * @Description: 监测视频
 * @Author: charles
 * @Date: 2021-12-06 17:09:59
 * @LastEditors: Ronda
 * @LastEditTime: 2022-05-23 15:21:22
-->
<template>
  <div class="video">
    <div class="pro_dev">
      <el-input placeholder="输入关键字进行过滤" v-model="filterText">
      </el-input>
      <el-tree
        :data="proDevTree"
        ref="tree"
        :filter-node-method="filterNode"
        :props="{ children: 'children', label: 'name' }"
        @node-click="handleNodeClick"
      ></el-tree>
    </div>
    <div class="data_container">
      <div v-if="params.device_id" style="padding-right: 0.5em">
        <video
          class="player"
          src="http://124.223.22.76/清华副教授的开学演讲.mp4"
          autoplay
          loop
          muted
        ></video>
      </div>
      <div class="info" v-else>请选择设备进行查看</div>
    </div>
  </div>
</template>
<script>
import { get } from "@/utils/request";
import moment from "moment";
export default {
  data() {
    return {
      filterText: "",
      proDevTree: [],
      monitors: [],
      params: {
        device_id: 0,
      },
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  mounted() {
    this.loadProDevTree();
  },
  methods: {
    loadDetails() {
      // 加载详情
    },
    // 加载工程设备
    loadProDevTree() {
      let url = "/engineer/findEngineerDeviceTree";
      get(url).then((resp) => {
        this.proDevTree = resp.data;
      });
    },
    // 过滤节点
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    // 点击节点
    handleNodeClick(node) {
      if (!node.children) {
        this.params.device_id = node.id;
        this.params.engineer_id = node.engineer_id;
        // 加载监测数据
        this.loadDetails();
      }
    },
  },
};
</script>
<style>
</style>
<style lang="scss" scoped>
.video {
  position: absolute;
  width: 100%;
  top: 0.5em;
  bottom: 0.5em;
  display: flex;
  .pro_dev {
    flex-basis: 180px;
    padding-right: 0.5em;
    border-right: 1px solid #dfe4ed;
  }
  .data_container {
    flex: 1;
    padding: 0 1em;
  }

  .info {
    padding: 3em 0;
    text-align: center;
    color: red;
  }
  .player {
    width: 100%;
  }
}
</style>